<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-13 17:12:24
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-20 10:36:38
-->
<template>
    <div class="select">
        <div @click="showYear = true" style="position: relative">
            <span v-if="startYear">{{ startYear }}年</span><span v-else>全部</span><i class="sanjiao"></i>
        </div>
        <van-popup v-model:show="showYear" round position="bottom">
            <van-picker title="选择年份" :columns="yearList" @cancel="showYear = false" :defaultIndex="defaultYear" @confirm="confirmYear" />
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import dateJs from 'dayjs';
export default defineComponent({
    name: 'Year',
    components: {},
    props: {},
    emits: ['emit'],
    setup(props, ctx) {
        var nowyear: number = 2000;
        const router = useRouter();
        const state = reactive({
            yearList: [] as string[],
            showYear: false,
            startYear: '',
            endYear: '',
            defaultYear: 0,
        });
        const getYear = () => {
            if (nowyear < 2099) {
                state.yearList.push(nowyear.toString());
                nowyear++;
                getYear();
            }
        };

        onMounted(() => {
            getYear();
            state.defaultYear = new Date().getFullYear() - 2000;
            // state.startYear = state.yearList[state.defaultYear];
            // state.endYear = dateJs(state.startYear).add(1, 'year')['$y'];
        });
        function confirmYear(value, index) {
            state.startYear = value;
            state.endYear = dateJs(state.startYear).add(1, 'year')['$y'];
            state.showYear = false;
            ctx.emit('emit', state);
        }
        return {
            ...toRefs(state),
            confirmYear,
        };
    },
});
</script>

<style lang="scss" scoped>
</style>
